import React, { useState, useEffect } from 'react'
import { Button, Table, Space, Popconfirm } from 'antd'
import ExamForm from './ExamForm'
import './examTab.less'
import {
    selectExamAsync,
    createExamAsync,
    updateExamAsync,
    deleteExamAsync
} from '../../api/exam'
import {
    addExamScoreAsync,
    removeExamScoreAsync,
    selectScoreAsync
} from '../../api/score'

function ExamTab(props) {
    const [showData, setShowData] = useState([])
    const [modalVisible, setModalVisible] = useState(false)
    const [modalData, setModalData] = useState({})
    const [isEdit, setIsEdit] = useState(false)
    const {
        studentData,
        examData,
        setExamData,
        scoreData,
        setScoreData,
        pageLoading,
        setPageLoading
    } = props
    // 异步请求函数抽象
    const asyncRequest = async (fn, payload) => {
        payload = payload || []
        const res = await fn(...payload)
        if (res.code === 0) {
            return res.data ? res.data : true
        }
    }
    useEffect(() => {
        setShowData(
            examData.map((item, i) => {
                return {
                    index: i + 1,
                    no: item.no,
                    name: item.name
                }
            })
        )
        setPageLoading(false)
    }, [examData, setPageLoading])
    // 添加按钮点击事件
    const createButtonEvent = () => {
        setModalVisible(true)
        setIsEdit(false)
        setModalData({
            type: 'E',
            no: null,
            name: ''
        })
    }
    // 修改按钮点击事件
    const updateButtonEvent = (text, record) => {
        setModalVisible(true)
        setIsEdit(true)
        setModalData(record)
    }
    // 删除按钮点击事件
    const deleteButtonEvent = async (text, record) => {
        // console.log(record)
        setPageLoading(true)
        if (
            (await asyncRequest(deleteExamAsync, [record.no])) &&
            (await asyncRequest(removeExamScoreAsync, [record.no]))
        ) {
            setExamData(await asyncRequest(selectExamAsync))
            setPageLoading(false)
        }
    }
    // 对话框中确定按钮点击事件
    const modalOk = async (data, oldData) => {
        setModalVisible(false)
        setPageLoading(true)
        data.type = 'E'
        if (isEdit) {
            if (await asyncRequest(updateExamAsync, [data, oldData])) {
                setExamData(await asyncRequest(selectExamAsync))
                setPageLoading(false)
            }
        } else {
            if (await asyncRequest(createExamAsync, [data])) {
                setExamData(await asyncRequest(selectExamAsync))
                setPageLoading(false)
            }
            const newList = studentData.map((item) => {
                return {
                    chinese: null,
                    math: null,
                    eglish: null,
                    physics: null,
                    chemistry: null,
                    biology: null,
                    studentNo: item.no
                }
            })
            if (await asyncRequest(addExamScoreAsync, [data.no, newList])) {
                await setScoreData(await asyncRequest(selectScoreAsync))
                await scoreData
            }
        }
    }
    // 对话框中取消按钮点击事件
    const modalCancel = () => {
        setModalVisible(false)
    }
    // 判断考试编码是否重复
    const isRepeat = (no) => showData.some((item) => +item.no === +no)

    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            editable: false,
            sorter: (a, b) => a.index - b.index
        },
        {
            title: '考试编号',
            dataIndex: 'no',
            editable: true,
            sorter: (a, b) => a.no - b.no
        },
        {
            title: '考试名称',
            dataIndex: 'name',
            editable: true
        },
        {
            title: '操作',
            dataIndex: 'handle',
            render: (text, record) => {
                return (
                    <Space>
                        <Button
                            type="primary"
                            onClick={() => {
                                updateButtonEvent(text, record)
                            }}
                        >
                            修改
                        </Button>
                        <Popconfirm
                            title="是否确定要删除？"
                            onConfirm={() => {
                                deleteButtonEvent(text, record)
                            }}
                        >
                            <Button type="danger">删除</Button>
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]
    return (
        <div className="exam-tab-container">
            <div className="button-header">
                <Button type="primary" onClick={createButtonEvent}>
                    添加考试
                </Button>
            </div>
            <Table
                bordered
                dataSource={showData}
                columns={columns}
                rowKey={(item) => item.no}
                loading={pageLoading}
            />
            <ExamForm
                modalVisible={modalVisible}
                modalOk={modalOk}
                modalCancel={modalCancel}
                isEdit={isEdit}
                modalData={modalData}
                isRepeat={isRepeat}
            />
        </div>
    )
}

export default ExamTab
